<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <script type="text/javascript" src="./style.js"></script>
  <!--<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="author" content="mironcoder" />
  <meta name="email" content="mironcoder@gmail.com" />
  <meta name="profile" content="https://themeforest.net/user/mironcoder" />
  <meta name="template" content="Organe" />
  <meta name="title" content="Organe - Organic Food HTML Template" />
  <meta name="keywords" content="organe, organic, food, shop, ecommerce, store, html, agriculture, vegetable, organic food, organic product, organic farm, organic life, organic shop, food store" />
  <title>Organe - Register</title>-->
  <link rel="icon" href="images/favicon.png" />
  <link rel="stylesheet" href="fonts/flaticon/flaticon.css" />
  <link rel="stylesheet" href="fonts/icofont/icofont.min.css" />
  <link rel="stylesheet" href="css/vendor/nice-select.min.css" />
  <link rel="stylesheet" href="css/vendor/jquery-ui.min.css" />
  <link rel="stylesheet" href="css/vendor/venobox.min.css" />
  <link rel="stylesheet" href="css/vendor/slick.min.css" />
  <link rel="stylesheet" href="css/vendor/bootstrap.min.css" />
  <link rel="stylesheet" href="css/custom/main.css" />
  <link rel="stylesheet" href="css/custom/profile.css" />
  <link rel="stylesheet" href="css/custom/user-form.css" />
 </head>
 <body>
  <section class="user-form-part">
   <div class="container">
    <div class="row justify-content-center">
     <div class="col-12 col-sm-10 col-md-8 col-lg-6 col-xl-5">
      <div class="user-form-logo">
       <a href="index.html"><img src="images/logo.png" alt="logo" /></a>
      </div>
      <div class="user-form-card">
       <div class="user-form-title">
        <h2>现在加入我们！</h2>
        <p>一分钟内注册新账号！</p>
       </div>
       <form class="user-form">
        <div class="form-group">
         <label class="form-label">姓名</label>
         <input type="text" class="form-control" placeholder="姓名" />
        </div>
        <div class="form-group">
         <label class="form-label">手机号</label>
         <input type="text" id="zh" class="form-control" onblur="userBin()" placeholder="手机号" />
         <small id="userText">手机号格式为中国大陆手机号</small>
        </div>
        <div class="form-group">
         <label class="form-label">地址</label>
         <input type="email" class="form-control" placeholder="地址" />
        </div>
         <div class="form-group">
       <label class="form-label">上传头像</label>
       <input class="form-control" type="file" />
      </div>
        <div class="form-group">
         <label class="form-label">密码</label>
         <input type="password" id="pwd" class="form-control" onblur="pwdBin()" placeholder="密码" />
        </div>
           <pre id="pwdText">   </pre>
        <div class="form-group">
         <label class="form-label">确认密码</label>
         <input type="password" id="repwd" class="form-control" placeholder="确认密码" />
        </div>
           <pre id="repwdText">密码由英文字母和数字组成的4-10位字符     </pre>
               <div align="center" id="slideBar"></div>
        <div class="form-button">
         <button onclick="myFunction()" id="btnSave" >注册</button>
             <script> document.getElementById("btnSave").setAttribute("disabled", true);//设置不可点击</script>
    <script type="text/javascript">//滑块验证码
        var dataList = ["0","1"];
        var options = {
            dataList: dataList,
            success:function(){
                console.log("show");
                document.getElementById("btnSave").removeAttribute("disabled");//设置恢复点击
            },
            fail: function(){
            document.getElementById("btnSave").setAttribute("disabled", true);//设置不可点击
            }
        };
        SliderBar("slideBar", options);
    </script>
         <script language="JavaScript" type="text/javascript">//设置手机号正则表达式
           function userBin(){
           var user=document.getElementById("zh").value;
		var userReg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;       <!-- 中国三大运营商手机格式-->
		var userText=document.getElementById("userText");
		if (user==""){userText.innerHTML="输入不能为空!";
		return false;}
		if(userReg.test(user)){
			userText.innerHTML="输入格式正确!";
			return true;
		}else{
			userText.innerHTML="输入格式不正确!";}
		return false;}
            </script>
            <script>function pwdBin(){              //密码验证，推荐分开判断
		var pwd=document.getElementById("pwd").value;
		var pwdReg=/^[a-zA-Z0-9]{4,10}$/;
		//alert(pwdReg.test(pwd));
		var pwdText=document.getElementById("pwdText");
		if(pwdReg.test(pwd)){
			pwdText.innerHTML="输入正确!";
			var repwd=document.getElementById("repwd").value;
			var repwdText=document.getElementById("repwdText");
			if(pwd==repwd){
				repwdText.innerHTML="输入正确!";
				return true;
			}else{
				repwdText.innerHTML="第二次输入的密码与第一次不相同";
			}
		}else{
			pwdText.innerHTML="输入不正确!";
		}
		return false;
	}
</script>
            <script>function textFun(id) {
                   return document.getElementById(id).value;
                     }
               function myFunction() {
                   if(textFun("zh")=="19936074862" && textFun("pwd")=="1234" &&textFun("pwd")==textFun("repwd"))   {alert("注册成功");
                   setTimeout('window.location.href="login.html?back url="+window.location.href',1000);}
                   else{alert("注册失败");}
                   }</script>
        </div>
       </form>
      </div>
      <div class="user-form-remind">
       <p>已经有账户了？<a href="login.html">这里登录</a></p>
      </div>
      <div class="user-form-footer">
       <p>饿极了 | &copy; Copyright by <a href="#">Mironcoder</a></p>
      </div>
     </div>
    </div>
   </div>
  </section>

  <!--<script src="js/vendor/jquery-1.12.4.min.js"></script>
  <script src="js/vendor/popper.min.js"></script>
  <script src="js/vendor/bootstrap.min.js"></script>
  <script src="js/vendor/nice-select.min.js"></script>
  <script src="js/vendor/venobox.min.js"></script>
  <script src="js/vendor/jquery-ui.js"></script>
  <script src="js/vendor/slick.min.js"></script>
  <script src="js/custom/nice-select.js"></script>
  <script src="js/custom/price-range.js"></script>
  <script src="js/custom/accordion.js"></script>
  <script src="js/custom/venobox.js"></script>
  <script src="js/custom/slick.js"></script>
  <script src="js/custom/main.js"></script>-->
 </body>
</html>